<!-- 普通模式演示(vue) -->
<template>
	<file-page class="file-content popup-title">
		<u-popup :show="data.show">
			<view class="bg-color file-box">
				<z-paging ref="paging" v-model="page.list" @query="page.queryList">
					<!-- 需要固定在顶部不滚动的view放在slot="top"的view中，如果需要跟着滚动，则不要设置slot="top" -->
					<!-- 注意！此处的z-tabs为独立的组件，可替换为第三方的tabs，若需要使用z-tabs，请在插件市场搜索z-tabs并引入，否则会报插件找不到的错误 -->
					<template #top>
						<view class="bg-color">
							<u-search placeholder="搜索文件名称" v-model="data.keyWord" shape="square" :showAction="false"
								margin="20rpx" height="80rpx" placeholderColor="rgba(0,0,0,0.4)" @search="page.search"
								@clear="page.clear"></u-search>
						</view>
						<view class="tip"> 勾选签署文件，完成签署文件填入 </view>
					</template>
					<!-- 如果希望其他view跟着页面滚动，可以放在z-paging标签内 -->
					<view class="file-item" v-for="(item,index) in page.list" :key="index">
						<u-checkbox-group>
							<u-checkbox v-model="item.isCheck" @change='page.change(index)' shape="circle"
								:label="item.file.org_name"></u-checkbox>
						</u-checkbox-group>
					</view>
					<template #bottom>
						<view class="flex bottom-button">
							<u-button type="error" text="取消" :plain="true" class="custom-style" @click="close"
								:customStyle="butStyle"></u-button>
							<u-button type="primary" text="确定" class="custom-style" @click="page.submit" iconColor=""
								:customStyle="butStyle"></u-button>
						</view>
					</template>
				</z-paging>
			</view>
			<view @click="toHref" style="height: 100rpx" class="Add">添加<br />合同</view>
		</u-popup>
	</file-page>
</template>
<script setup>
	import {
		ref,
		reactive,
		defineEmits
	} from 'vue';
	import {
		arrayAppend,
		arrayPluck,
		changeItem,
		goNav
	} from "../utils/common";
	import {
		butStyle
	} from "../utils/style";
	import {
		fileList
	} from "../api/module/file";
	const emit = defineEmits(['return-file']);
	const paging = ref(null)
	const data = reactive({
		keyWord: '',
		changeItem: [],
		userType: 1,
		show: false,
		type: 'member',
		fileType: ''
	});
	const page = reactive({
		clearChange: function() {
			data.changeItem = [];
		},
		change: (index) => {
			page.list[index].isCheck = !page.list[index].isCheck
		},
		search: () => {
			paging.value.reload();
		},
		clear: () => {
			data.keyWord = ''
			paging.value.reload();
		},
		submit: () => {
			data.changeItem = changeItem(page.list);
			emit('return-file', {
				file: arrayPluck(data.changeItem, 'file'),
				type: data.fileType
			});
			close();
		},
		queryList: (pageNo, pageSize) => {
			if (!data.show) {
				return;
			}
			const params = reactive({
				page: pageNo || 1,
				limit: pageSize || 10,
				file_type: 'file',
				ext: ['pdf', 'doc', 'docx'],
				org_name: data.keyWord,
				id: ''
			});
			fileList(params).then(res => {
				paging.value.complete(arrayAppend(res.data, {
					isCheck: false,
				}))
			})
		}
	});
	const toHref = (index) => {
		close();
		goNav('/pages/my/file/index')
	}
	const open = (userType, type) => {
		data.fileType = type;
		data.show = true;
		data.userType = userType;
		paging.value.reload();
	}
	const close = () => {
		data.show = false;
		page.list = [];
		page.clearChange();
	}
	defineExpose({
		open,
		close
	});
</script>
<style lang="less" scoped src="/static/css/contract/signing_record.scss"></style>